import React, { Component } from 'react'

import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Popconfirm, Badge } from 'antd';

import Form from './components/SearchForm';

import Ellipsis from '@/components/Ellipsis';

import { UmiComponentProps, BaseComponentProps, Filds } from '@/common/type'
import { checkInit } from '@/utils/util';


interface IData {
  id: string | number;
  image: string;
  buildName: string;
  floorName: string;
  areaName: string;
  address: string;
  valueMap: {
    voltage?: string;
  }
}

export interface P {
  list?: {
    data: Array<IData>,
    dataCnt: number
  },
  log?: Array<any>;
}

interface State {
  current: number;
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ device_smart_smoke, loading, menu }) => ({
  list: device_smart_smoke.list || {},
  log: device_smart_smoke.log || [],
  dict: device_smart_smoke.dict,
  location: device_smart_smoke.location || [],
  cond: device_smart_smoke.cond || {},
  buttons: menu.buttons,
  loading: loading.effects['device_smart_smoke/queryPage']
}))
class Somke extends Component<Props, State> {

  readonly state: State = {
    current: 1,

  };

  componentDidMount() {
    const { dispatch, cond } = this.props;
    // console.log(cond);
    this.setState({
      current: cond.pageNum
    })
    checkInit() ? dispatch({ type: `device_smart_smoke/initCond`, payload: cond }) : this.queryData();
  }

  private queryData(offset = this.props.cond.pageNum || 1) {
    const { dispatch, cond } = this.props;

    dispatch({
      type: 'device_smart_smoke/updateCond',
      payload: {
        ...cond,
        pageNum: offset,
      },
    });
  }

  private initCurrent = () => {
    this.setState({ current: 1 })
  }

  private onShowSizeChange = (current: number, pageSize: number) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: `device_smart_smoke/updateCond`, payload: cond })
  }

  private remove = (id: string | number) => {
    const { dispatch } = this.props;

    this.setState({
      current: 1
    }, () => {
      dispatch({
        type: 'device_smart_smoke/remove',
        payload: id
      })
    })
  }


  render() {
    const { buttons } = this.props;


    const btnList: Filds = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }
    const { data = [], dataCnt } = this.props.list;

    const pagination = {
      total: dataCnt,
      showTotal: (total: number) => `共 ${total} 条`,
      current: this.state.current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      showSizeChanger: true,
      onChange: (current: number) => {
        this.setState({ current }, () => this.queryData(current));
      },
    };

    const columns: any = [{
      title: '系统编号',
      dataIndex: 'systemNo',
    }, {
      title: '设备名称',
      dataIndex: 'name',
    }, {
      title: '安装地址',
      dataIndex: 'installationAddr',
      render: (text, record) => (
        <Ellipsis tooltip={true} lines={1}>
          {record.buildName || ''}{record.floorName || ''}{record.areaName || ''}{text || ''}
        </Ellipsis>
      )
    }, {
      title: 'IMEI码',
      dataIndex: 'networkAddr',
    }, {
      title: '厂家',
      dataIndex: 'brandName',
    }, {
      title: '型号',
      dataIndex: 'productName',
    }, {
      title: '联网状态',
      dataIndex: 'runStatus',
      render: (text, record) => (
        <>
          <Badge status={+text === 1 ? "success" : 'error'} />
          <span>{record.runStatusName}</span>
        </>
      )
    }, {
      title: '操作', key: 'x',
      render: (record: IData, text: number | string, index: number) => {
        return (
          <div style={{ display: 'flex' }}>
            <>
              <Link to={`/data/device_smart_smoke/${record.id}/update`}>编辑</Link>
              <Divider type="vertical" />
            </>
            {/* <Popconfirm
              title="请确认是否删除?"
              onConfirm={() => this.remove(record.id)} okText="确定" cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm> */}
          </div>
        )
      }
    }];

    const ans = Array.isArray(data) ? data.map((v, index) => ({
      ...v,
      ind: index + 1 < 10 ? `0${index + 1}` : index + 1,
    })) : []

    return (
      <>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={[{
            title: '序号',
            dataIndex: 'ind',
          }, ...columns]}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
          rowKey="id"
        />
      </>
    );
  }
}

export default Somke;

